<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>360同城帮 - 手机维修、手机回收、优品</title>
    <link rel="stylesheet" href="sass/style.css">
    <link rel="stylesheet" href="sass/swiper.min.css">
    <script src="js/pagePlugin.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/baiduTemplate.js"></script>
    <script src="js/swiper.min.js"></script>
</head>
<body>
    <!--头部-->
    <header>
        <div id="topL">
            <span id="cityView">北京</span>
            <a href="#" id="cutCityBn">[切换城市]</a> |
            <a href="#">同城帮首页</a>
        </div>
        <ul id="topR">
            <li><a href="#" id="loginBn">登录</a><a href="#" id="user"></a>|</li>
            <li><a href="#" id="adduserBn">注册</a><a href="#" id="logoutBn">退出</a>|</li>
            <li><a href="#">我的订单</a>|</li>
            <li><a href="#">在线客服</a>（9:00-21：00）|</li>
            <li><a href="#">客户服务<b></b></a>|</li>
            <li><a href="#">论坛</a>|</li>
            <li><a href="#" style="color: red">投诉建议</a></li>
        </ul>
    </header>
    <!--导航-->
    <nav>
        <img src="image/logo1.png" alt="">
        <ul>
           <li>二手优品</li>
           <li>手机回收</li>
           <li>手机维修</li>
           <li>电脑维修</li>
           <li>以旧换新</li>
           <li>手机租用</li>
        </ul>
        <img src="image/hot.png" alt="" id="hot">
    </nav>
    <!--菜单-->
    <div id="menuDiv">
        <!--轮播图-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img data-swiper-parallax="-100" src="image/roll1.jpg" alt=""></div>
                <div class="swiper-slide"><img data-swiper-parallax="-100" src="image/roll2.png" alt=""></div>
                <div class="swiper-slide"><img data-swiper-parallax="-100" src="image/roll3.png" alt=""></div>
            </div>
            <!--分页器:小圆点-->
            <div class="swiper-pagination" id="pagination"></div>
        </div>
        <!--左侧菜单栏-->
        <ul id="menu">
            <li>
                <img src="" alt="">
                <span class="leftM">修手机/pad</span>
                <span class="big">></span>
            </li>
            <li>
                <img src="" alt="">
                <span class="leftM">修电脑</span>
                <span class="big">></span>
            </li>
            <li>
                <img src="" alt="">
                <span class="leftM">卖手机/电脑</span>
                <span class="big">></span>
            </li>
            <li>
                <img src="" alt="">
                <span class="leftM">买二手机/pad</span>
                <span class="big">></span>
            </li>
        </ul>
    </div>
    <div id="main">
        <!--广告-->
        <div id="ad">
            <img src="image/ad0.jpg" alt="">
            <img src="image/ad1.jpg" alt="">
            <img src="image/ad2.png" alt="">
            <img src="image/ad3.jpg" alt="">
        </div>
        <!--热门手机回收-->
        <div class="pic">
            <div class="picT">
                <h2>热门手机回收<a id="more">查看更多 <span>></span></a></h2>
            </div>
            <div class="picB1">
                <img src="image/ad2.jpg" alt="" id="imgH">
                <ul id="hPList">

                </ul>

            </div>
        </div>
        <!--优品精选-->
        <div class="pic">
            <div class="picT">
                <h2>优品精选<a id="more1">查看更多 <span>></span></a></h2>
            </div>
            <div class="picB">
                <img src="image/ad1.png" alt="" id="imgY">
                <ul id="youList">

                </ul>

            </div>
        </div>
        <!--到店维修-->
        <h2 class="h2">到店维修</h2>
    </div>
    <div id="content">
        <!--搜索地区-->
        <div id="searchDiv">
            <div class="cityBn">
                <span>北京</span>
                <b></b>
            </div>
            <div class="cityBn">
                <span>选择区县</span>
                <b></b>
            </div>
            <input type="text" id="search">
            <div id="searchBn">搜索</div>
        </div>
        <div id="contentL">
            <!--排序-->
            <div id="sort">
                <div id="default">默认排序</div>
                <div id="count">按成交量</div>
                <div id="visit">按人气</div>
                <div>
                    <input type="checkbox">
                    先行赔付
                </div>
                <p id="mapBn">
                    <img src="image/icon.png" alt="">
                    <span>地图模式</span>
                </p>
            </div>
            <!--店铺展示-->
            <ul id="list">
                <!--<li>
                    <div class="liL">
                        <img src="image/goods3.jpg" alt="">
                    </div>
                    <div class="liC">
                        <p>
                            <span>顺通电脑维修</span>
                            <span>店铺等级:
                                    <img src="image/zuan.png" alt="">
                            </span>
                        </p>
                        <p>主营：电脑维修，电脑周边配件，系统维护，网路安装，打印...</p>
                        <p>地址：北京通州区瑞都国际南区12号楼底商12-2</p>
                    </div>
                    <div class="liR">
                        <p>
                            <img src="image/rmb.png" alt="">
                            <span>先行赔付</span>
                        </p>
                        <p>
                            <img src="image/vip.png" alt="">
                            <span>同城帮认证</span>
                        </p>
                        <p>人气：129484次浏览</p>
                    </div>
                    <a href="#" class="enterStore">进入店铺</a>
                </li>-->
            </ul>
            <div id="pageDiv">
                <ul id="page">

                </ul>
            </div>

        </div>
        <!--商家好评榜-->
        <div id="contentR">
            <p>商家好评榜</p>
            <ul id="listShop">
                <li>
                    <!--<span>1</span>
                    <img src="image/ljc.jpg" alt="">
                    <h3>联金诚维修中心</h3>
                    <p>121807条评论</p>-->
                </li>
            </ul>
        </div>
        <!--分页-->
        <!--<div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
            <div>下一页》</div>
        </div>-->
    </div>
    <!--底部-->
    <footer>
        <div id="footT">
            <div class="footDiv">
                <div>
                    <img src="image/foot1.jpg" alt="">
                </div>
                <div>
                    <h3>购物指南</h3>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </div>
            <div class="footDiv">
                <div>
                    <img src="image/foot2.jpg" alt="">
                </div>
                <div>
                    <h3>购物指南</h3>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </div>
            <div class="footDiv">
                <div>
                    <img src="image/foot3.jpg" alt="">
                </div>
                <div>
                    <h3>购物指南</h3>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </div>
            <div class="footDiv">
                <div>
                    <img src="image/foot4.jpg" alt="">
                </div>

                <div>
                    <h3>购物指南</h3>
                    <p>购物流程</p>
                    <p>帮助文档</p>
                </div>
            </div>
        </div>
        <div id="footB">
            <p>
                <span>客服电话：4000-399-360 / 010-53767360</span>
                <span>投诉建议</span>
                <span>网站地图</span>
            </p>
            <p>Copyright &copy; 2005-2017  360.CN  All Rights Reserved  360安全中心</p>
            <p>
                <span>京ICP备08010314号-19</span>
                <span>京公网安备110000000006号</span>
            </p>
        </div>
    </footer>
    <!--城市列表-->
    <div id="cityDiv">
            <p>
                <span>城市列表</span><span id="cityCloseBn">关闭×</span>
            </p>
            <div id="cityCon">
                <p>热门</p>
                <ul id="hotCity"></ul>
                <p>拼音</p>
                <ul id="pinyinList"></ul>
                <ul id="cityList"></ul>
            </div>
    </div>
    <!--登录页面-->
    <div class="loginDiv">
        <div class="loginCon">
            <div class="topLogin">
                <img src="image/man1.png" alt="">
                <div>欢迎注册360同城帮</div>
                <span id="closeLoginBn">×</span>
            </div>
            <div id="loginB">
                <p>
                    账&nbsp;&nbsp;&nbsp;&nbsp;号<input type="text" id="loginN"><span></span>
                </p>
                <p>
                    密&nbsp;&nbsp;&nbsp;&nbsp;码<input type="text" id="loginPwd"><span></span>
                </p>
                <p>
                    验证码<input type="text" id="yzmL"><span></span><button id="yzmLBn">换一张</button><span></span>
                </p>
                <p>
                    <input type="checkbox" id="autoBn">下次自动登录
                </p>
                <p>
                    <button id="loginBnQ">立即登录</button><span></span>
                </p>
            </div>

        </div>
    </div>
    <!--注册页面-->
    <div class="addUserDiv">
        <div class="addUserCon">
            <div class="topAdd">
                <img src="image/man1.png" alt="">
                <div>欢迎注册360同城帮</div>
                <span id="closeAddUser">×</span>
            </div>
            <div class="addL">
                <ul>
                    <li>手机注册</li>
                    <li>邮箱注册</li>
                </ul>
                <p>已有账号，<a href="#" id="qAddUser">立即登录</a></p>
            </div>
            <div class="addR">
                <div id="telDiv">
                    <p>
                        手机号<input type="text" id="tel"><span></span>
                    </p>
                    <p>
                        验证码<input type="text" id="yzm"><span></span><button id="yzmBn">换一张</button><span></span>
                    </p>
                    <p>
                        校验码<input type="text" id="jym"><button id="jymBn">免费获取校验码</button>
                    </p>
                    <p>
                        密&nbsp;&nbsp;&nbsp;码<input type="password" id="pwd"><span></span>
                    </p>
                    <p>
                        <input type="checkbox" id="checks"><span>我已阅读并同意</span>
                    </p>
                    <p>
                        <button id="addUser" disabled>马上注册</button><span></span>
                    </p>
                </div>
                <!--<div id="emailDiv">
                    <p>
                        邮箱 <input type="text">
                    </p>
                    <p>
                        密码 <input type="text">
                    </p>
                    <p>
                        验证码 <input type="text"><span></span><button>换一张</button>
                    </p>
                </div>-->

            </div>

        </div>

    </div>
    <!--二维码固定-->
    <div id="codeDiv">
        <img src="image/logo.png" alt="" id="logo">
        <a href="#">在线咨询</a>
        <img src="image/code.png" alt="" id="code">
    </div>
    <!--回到顶部-->
    <a href="#" id="top">
        <img src="image/top.png" alt="">
        <p>回</p>
        <p>顶</p>
        <p>部</p>
    </a>
    <!--地图页面-->
    <div id="mapDiv">
        <div id="mapContainer">
            <div class="topMap">
                <h3>地图模式<span id="closeMap">×</span></h3>
            </div>
            <div id="container" tabindex="0"></div>
            <div id="mapPageDiv">
                <ul id="mapPage">

                </ul>
            </div>
        </div>
    </div>
    <!--引入地图脚本  key=你申请的key值-->
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=60255c75935c3ef1e30f72ff3d35214d"></script>
    <!--热门手机回收-->
    <script type="text/html" id="hotPhone">
        <%for(var i=0;i< arr.length;i++){%>
            <li>
                <div>
                    <img src="<%=arr[i].img_url%>" alt="">
                </div>

                <p><%=arr[i].model_alis%></p>
            </li>
        <%}%>
    </script>
    <!--优品精选-->
    <script type="text/html" id="ypTp">
        <%for(var i=0;i< arr.length;i++){%>
        <li>
            <div>
                <img src="<%=arr[i].thum_img.big%>" alt="">
            </div>
            <p><%=arr[i].brand_name%>&nbsp;&nbsp;<%=arr[i].model_name%><br>
                <span>￥<%=arr[i].com_price%></span>
            </p>
        </li>
        <%}%>
    </script>
    <!--热门城市-->
    <script type="text/html" id="hotTp">
        <%for(var i=0;i< hotArr.length;i++){%>
            <li onclick="cityView('<%=hotArr[i].name%>')"><%=hotArr[i].name%></li>
        <%}%>
    </script>
    <script type="text/html" id="pinyinTp">
        <%for(var k in cityObj){%>
            <li onclick="pinyin('<%=k%>')"><%=k%></li>
        <%}%>
    </script>
    <script type="text/html" id="cityTp">
        <%for(var i=0;i< arr.length;i++){%>
            <li onclick="cityView('<%=arr[i].name%>')"><%=arr[i].name%></li>
        <%}%>
    </script>
    <!--店铺列表-->
    <script type="text/html" id="sortList">
            <%for(var i=0;i< arr.length;i++){%>
                <li>
                    <div class="liL">
                        <img src="<%=arr[i].shop_ico%>" alt="">
                    </div>
                    <div class="liC">
                        <p>
                            <span><%=arr[i].shop_name%></span>
                            <span>店铺等级:<%=arr[i].level%></span>
                        </p>
                        <p>主营：<%=arr[i].main%></p>
                        <p>地址：<%=arr[i].addr_detail%></p>
                    </div>
                    <div class="liR">
                        <p>
                            <img src="image/rmb.png" alt="">
                            <span>先行赔付</span>
                        </p>
                        <p>
                            <img src="image/vip.png" alt="">
                            <span>同城帮认证</span>
                        </p>
                        <p>人气：<%=arr[i].shop_visit%>次浏览</p>
                    </div>
                    <a href="#" class="enterStore" onclick="enterStore('<%=arr[i].qid%>')">进入店铺</a>
                </li>
            <%}%>
    </script>
    <!--商家好评榜-->
    <script type="text/html" id="storeEvaluate">
        <%for(var i=0;i< arr.length;i++){%>
            <li>
                <span><%=(i+1)%></span>
                <img src="<%=arr[i].shop_ico%>" alt="">
                <h3><%=arr[i].shop_name%></h3>
                <p><%=arr[i].comments%>条评论</p>
            </li>
        <%}%>
    </script>

    <script src="js/main.js"></script>
</body>
</html>